<!--
 * @Description: 缺陷信息销号
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2021-09-30 15:57:08
 * @LastEditors: Huang Junjie
-->
<template>
  <div>
    <base-dialog
      class="dialog_box dialog-body-fieldset"
      width="980px"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @updateData="updateData"
      @open="beforeOpenDialog">
      <el-form
        ref="dataForm"
        :model="dialog.form"
        :rules="dialog.rules"
        :disabled="dialog.disabled"
        label-width="110px">
        <fieldset>
          <legend>基础信息</legend>
          <table id="look-data">
            <tbody v-for="(item, key) in lookData" :key="key">
              <tr v-if="item.type ==='text'">
                <td>{{ item.column1 }}</td>
                <td v-if="item.column2">{{ item.column2 }}</td>
                <td v-else>无</td>
                <td>{{ item.column3 }}</td>
                <td v-if="item.column4">{{ item.column4 }}</td>
                <td v-else>无</td>
                <td>{{ item.column5 }}</td>
                <td v-if="item.column6">{{ item.column6 }}</td>
                <td v-else-if="item.column6 === null">无</td>
                <td v-else />
              </tr>
              <tr v-if="item.type ==='textarea'">
                <td>{{ item.column1 }}</td>
                <td v-if="item.column2" colspan="6">{{ item.column2 }}</td>
                <td v-else colspan="6">无</td>
              </tr>
              <tr v-if="item.type ==='file'">
                <td colspan="6" class="file-box">
                  <div>缺陷照片</div>
                  <upload-file
                    v-if="dialog.visible && item.column2 && item.column2.length"
                    ref="upload"
                    :model="fileModal" />
                  <span v-else>无</span>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- <el-row>
            <el-col :span="8">
              <el-form-item label="线路" prop="seclineId">
                <select-tree
                  v-model="dialog.form.seclineId"
                  :options="dataList.seclineList"
                  node-click
                  :props="{ label: 'label', value: 'id', parent: 'parentId', children: 'children' }"
                  disabled
                  @selected="changeSeclineId" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="区间站场" prop="siteId">
                <el-select
                  v-model="dialog.form.siteId"
                  clearable
                  disabled
                  @change="changeSiteId">
                  <el-option
                    v-for="(item, index) in dataList.siteList"
                    :key="`a${index}`"
                    :label="item.siteName"
                    :value="item.siteId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支柱号" prop="pillarNum">
                <select-table
                  ref="pillarNum"
                  v-model="dialog.form.pillarNum"
                  :filter-form="selectTableModel.filterForm"
                  :filter-data="selectTableModel.filterData"
                  :default-data="dataList.pillarList"
                  :columns="selectTableModel.columns"
                  :total="selectTableModel.total"
                  :filter-fn="selectTableModel.filterFn"
                  disabled
                  @current-change="changePillarId"
                  @clear="clearPillarId" />
              </el-form-item>
            </el-col>
            <el-col v-if="dialog.form.pillarNum" :span="24">
              <el-form-item label="支柱关联信息" prop="originCode">
                （公里标：{{ formatRoad(dialog.form.roadMark) }}，行别：{{ dialog.form.directionName }}，隧道：{{ dialog.form.tunnelName }}，股道：{{ dialog.form.trackName }}，所属工区：{{ dialog.form.pillarDeptName }}）
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现人" prop="discoverPerson">
                <select-table
                  ref="discoverPerson"
                  v-model="dialog.form.discoverPerson"
                  :filter-form="selectTableModelFindBy.filterForm"
                  :filter-data="selectTableModelFindBy.filterData"
                  :default-data="dataList.staffList"
                  :columns="selectTableModelFindBy.columns"
                  :total="selectTableModelFindBy.total"
                  :filter-fn="selectTableModelFindBy.filterFn"
                  disabled
                  @current-change="changeTableItemFindBy"
                  @clear="dialog.form.discoverPerson = '';dialog.form.discoverPersonId = ''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷来源" prop="discoverSourceTypeId">
                <el-select
                  v-model="dialog.form.discoverSourceTypeId"
                  disabled
                  clearable>
                  <el-option
                    v-for="(item, index) in dialog.dataList.sourceList"
                    :key="`b${index}`"
                    :label="item.sourceTypeName"
                    :value="item.sourceTypeId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷分类" prop="defectTypeName">
                <select-table
                  v-model="dialog.form.defectTypeName"
                  :filter-form="selectTableModelClassify.filterForm"
                  :filter-data="selectTableModelClassify.filterData"
                  :default-data="dataList.classifyList"
                  :columns="selectTableModelClassify.columns"
                  :total="selectTableModelClassify.total"
                  :filter-fn="selectTableModelClassify.filterFn"
                  disabled
                  @current-change="changeTableItemDefectType"
                  @clear="dialog.form.defectTypeName = '';dialog.form.defectTypeId = ''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷等级" prop="defectGradeName">
                <select-table
                  v-model="dialog.form.defectGradeName"
                  :filter-form="selectTableModelGrade.filterForm"
                  :filter-data="selectTableModelGrade.filterData"
                  :default-data="dataList.gradeList"
                  :columns="selectTableModelGrade.columns"
                  :total="selectTableModelGrade.total"
                  :filter-fn="selectTableModelGrade.filterFn"
                  disabled
                  @current-change="changeTableItemGrade"
                  @clear="dialog.form.defectGradeName = '';dialog.form.defectGradeId = ''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷部位" prop="positionName">
                <select-table
                  v-model="dialog.form.positionName"
                  :filter-form="selectTableModelPosition.filterForm"
                  :filter-data="selectTableModelPosition.filterData"
                  :default-data="dataList.positionList"
                  :columns="selectTableModelPosition.columns"
                  :total="selectTableModelPosition.total"
                  :filter-fn="selectTableModelPosition.filterFn"
                  disabled
                  @current-change="changeTableItemPosition"
                  @clear="dialog.form.positionName = '';dialog.form.defectPositionId = ''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现日期" prop="discoverDate">
                <el-date-picker
                  v-model="dialog.form.discoverDate"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd"
                  disabled
                  @change="changeFindDate" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="整改期限" prop="rectifDatetime">
                <el-date-picker
                  v-model="dialog.form.rectifDatetime"
                  :picker-options="pickerSolveDate"
                  disabled
                  value-format="yyyy-MM-dd" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="整改责任工区" prop="solveWorkareaId">
                <el-select v-model="dialog.form.solveWorkareaId" disabled clearable>
                  <el-option
                    v-for="item in dataList.deptList"
                    :key="item.id"
                    :label="item.deptName"
                    :value="item.deptId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="缺陷描述" prop="defectInfoDesc">
                <el-input v-model="dialog.form.defectInfoDesc" type="textarea" :autosize="{ minRows: 4}" maxlength="500" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="缺陷照片" prop="defectImagesList">
                <upload-file :model="fileModal" @on-success="uploadSuccess" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </fieldset>
      </el-form>
      <el-form
        ref="cancelDataForm"
        :model="dialog.form"
        :rules="dialog.rules"
        :disabled="dialog.disabled"
        label-width="110px">
        <fieldset>
          <legend>整改情况</legend>
          <el-row>
            <el-col :span="8">
              <el-form-item label="缺陷成因" prop="defectReasonName">
                <select-table
                  v-model="dialog.form.defectReasonName"
                  :filter-form="selectTableModelCause.filterForm"
                  :filter-data="selectTableModelCause.filterData"
                  :default-data="dataList.causeList"
                  :columns="selectTableModelCause.columns"
                  :total="selectTableModelCause.total"
                  :filter-fn="selectTableModelCause.filterFn"
                  @current-change="changeTableItemCause"
                  @clear="dialog.form.defectReasonName = '';dialog.form.defectReasonId = ''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理人" prop="solvePersonal">
                <select-table
                  ref="solvePersonal"
                  v-model="dialog.form.solvePersonal"
                  :filter-form="selectTableModelSolvePerson.filterForm"
                  :filter-data="selectTableModelSolvePerson.filterData"
                  :default-data="dataList.staffList"
                  :columns="selectTableModelSolvePerson.columns"
                  :total="selectTableModelSolvePerson.total"
                  :filter-fn="selectTableModelSolvePerson.filterFn"
                  @current-change="changeTableItemSolvePerson"
                  @clear="dialog.form.solvePersonal='';dialog.form.solvePersonalId=''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理部门" prop="handleWorkareaName">
                <select-table
                  v-model="dialog.form.handleWorkareaName"
                  disabled
                  :filter-form="selectTableModelSolvePerson.filterForm"
                  :filter-data="selectTableModelSolvePerson.filterData"
                  :default-data="dataList.staffList"
                  :columns="selectTableModelSolvePerson.columns"
                  :total="selectTableModelSolvePerson.total"
                  :filter-fn="selectTableModelSolvePerson.filterFn"
                  @current-change="changeTableItemSolvePerson"
                  @clear="dialog.form.solvePersonal='';dialog.form.solvePersonalId=''" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="处理日期" prop="solveDatetime">
                <el-date-picker
                  v-model="dialog.form.solveDatetime"
                  :picker-options="pickerHandleDate"
                  value-format="yyyy-MM-dd" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销号情况" prop="status">
                <el-select
                  v-model="dialog.form.status"
                  value-key="value"
                  clearable>
                  <el-option label="未销号" value="NO" />
                  <el-option label="已销号" value="YES" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="处理情况" prop="solveMethod">
                <el-input v-model="dialog.form.solveMethod" type="textarea" :autosize="{ minRows: 4}" maxlength="500" />
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
        <fieldset style="margin-top: 20px;">
          <legend>缺陷照片</legend>
          <el-row>
            <el-col :span="24">
              <el-form-item label="复测照片" prop="retestImagesList">
                <upload-file :model="fileModalRetest" @on-success="uploadSuccessRetest" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="修后照片" prop="repairImagesList">
                <upload-file :model="fileModalRepair" @on-success="uploadSuccessRepair" />
              </el-form-item>
            </el-col>
          </el-row>
        </fieldset>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import { getInfoById, cancelNumber } from '@/api/jcwwtk/information'
import { getStaffList, getLineSiteList } from '@/api/basic-data/common'
// import { findWorkDeptList, getSeclineTree } from '@/api/basic-data/common'
import { getListPage as getPillarList } from '@/api/catenary/pillar'
import { getListPage as getClassifyList } from '@/api/jcwwtk/classify'
import { getListPage as getGradeList } from '@/api/jcwwtk/grade'
import { getListPage as getPositionList } from '@/api/jcwwtk/position'
import { getListPage as getCauseList } from '@/api/jcwwtk/cause'
import { getDatatime } from '@/utils'
import UploadFile from '@/views/cms/jcwsc/components/UploadFile'

export default {
  components: {
    UploadFile
  },
  props: {
    dialog: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 查看页面数据
      lookData: [],

      // 下拉框信息列表
      dataList: {
        deptList: [],
        siteList: [],
        pillarList: [],
        staffList: [],
        seclineList: [],
        classifyList: [],
        gradeList: [],
        positionList: [],
        causeList: []
      },

      // 图片上传配置
      fileModal: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: true,
        uploadType: 'img'
      },

      // 图片上传配置
      fileModalRetest: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: false,
        uploadType: 'img'
      },

      // 图片上传配置
      fileModalRepair: {
        title: '',
        visible: false,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: false,
        uploadType: 'img'
      },

      // 时间选择器配置
      pickerHandleDate: this.handleDate(),
      pickerSolveDate: this.handleDate(),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime()
        }
      },

      // 支柱选择器配置
      selectTableModel: {
        filterForm: {
          page: 1,
          size: 10,
          seclineId: '',
          siteId: '',
          pillarNum: '',
          directionId: '',
          unitCodeParams: ''
        },
        filterData: {
          pillarNum: {
            key: 'pillarNum',
            type: 'input',
            placeholder: '支柱号'
          },
          directionId: {
            width: '160px',
            key: 'directionId',
            type: 'select',
            title: '行别',
            placeholder: '行别',
            options: [],
            props: {
              label: 'directionName',
              value: 'directionId'
            },
            changeFn: () => {
              this.$refs.pillarNum.$refs.customSelect.focus()
            }
          }
        },
        columns: [
          { property: 'pillarNum', label: '支柱号' },
          { label: '公里标', prop: 'roadMark', formatter: row => this.formatRoad(row.roadMark) },
          { property: 'directionName', label: '行别' },
          { property: 'deptName', label: '所属工区' }
        ],
        total: 0,
        filterFn: getPillarList
      },

      // 发现人下拉配置
      selectTableModelFindBy: {
        filterForm: {
          page: 1,
          size: 10,
          staffName: '',
          deptId: '',
          unitCodeParams: ''
        },
        filterData: {
          staffName: {
            key: 'staffName',
            type: 'input',
            placeholder: '姓名'
          }
          // deptId: {
          //   clearable: false,
          //   key: 'deptId',
          //   type: 'selectTree',
          //   title: '部门',
          //   placeholder: '请选择部门',
          //   options: [],
          //   props: {
          //     label: 'label',
          //     value: 'id',
          //     parent: 'parentId',
          //     children: 'children'
          //   },
          //   changeFn: _ => {
          //     this.$refs.discoverPerson.$refs.customSelect.focus()
          //   }
          // }
        },
        columns: [
          { property: 'staffName', label: '发现人' },
          { property: 'deptName', label: '所属部门' }
        ],
        total: 0,
        filterFn: getStaffList
      },

      // 缺陷分类下拉配置
      selectTableModelClassify: {
        filterForm: {
          page: 1,
          size: 10,
          keyWord: '',
          unitCodeParams: ''
        },
        filterData: {
          keyWord: {
            key: 'keyWord',
            type: 'input',
            placeholder: '名称'
          }
        },
        columns: [
          { property: 'namePath', label: '分类名称' },
          { property: 'defectGradeName', label: '缺陷等级' }
        ],
        total: 0,
        filterFn: getClassifyList
      },

      // 缺陷等级下拉配置
      selectTableModelGrade: {
        filterForm: {
          page: 1,
          size: 10,
          keyWord: '',
          unitCodeParams: ''
        },
        filterData: {
          keyWord: {
            key: 'keyWord',
            type: 'input',
            placeholder: '名称'
          }
        },
        columns: [
          { property: 'defectGradeName', label: '等级名称' },
          { property: 'solveDays', label: '整改期限' },
          { property: 'remindTimeCount', label: '提醒期限' }
        ],
        total: 0,
        filterFn: getGradeList
      },

      // 缺陷部位下拉配置
      selectTableModelPosition: {
        filterForm: {
          page: 1,
          size: 10,
          keyWord: '',
          unitCodeParams: ''
        },
        filterData: {
          keyWord: {
            key: 'keyWord',
            type: 'input',
            placeholder: '名称'
          }
        },
        columns: [
          { property: 'namePath', label: '部位名称' }
        ],
        total: 0,
        filterFn: getPositionList
      },

      // 缺陷成因下拉配置
      selectTableModelCause: {
        filterForm: {
          page: 1,
          size: 10,
          keyWord: '',
          unitCodeParams: ''
        },
        filterData: {
          keyWord: {
            key: 'keyWord',
            type: 'input',
            placeholder: '名称'
          }
        },
        columns: [
          { property: 'namePath', label: '成因名称' }
        ],
        total: 0,
        filterFn: getCauseList
      },

      // 处理人下拉配置
      selectTableModelSolvePerson: {
        filterForm: {
          page: 1,
          size: 10,
          staffName: '',
          deptId: '',
          unitCodeParams: ''
        },
        filterData: {
          staffName: {
            key: 'staffName',
            type: 'input',
            placeholder: '姓名'
          }
          // deptId: {
          //   clearable: false,
          //   key: 'deptId',
          //   type: 'selectTree',
          //   title: '部门',
          //   placeholder: '请选择部门',
          //   options: [],
          //   props: {
          //     label: 'label',
          //     value: 'id',
          //     parent: 'parentId',
          //     children: 'children'
          //   },
          //   changeFn: _ => {
          //     this.$refs.discoverPerson.$refs.customSelect.focus()
          //   }
          // }
        },
        columns: [
          { property: 'staffName', label: '发现人' },
          { property: 'deptName', label: '所属部门' }
        ],
        total: 0,
        filterFn: getStaffList
      }
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.selectTableModelFindBy.filterForm.unitCodeParams = this.dialog.form.unitCodeParams
        this.selectTableModelClassify.filterForm.unitCodeParams = this.dialog.form.unitCodeParams
        this.selectTableModelGrade.filterForm.unitCodeParams = this.dialog.form.unitCodeParams
        this.selectTableModelPosition.filterForm.unitCodeParams = this.dialog.form.unitCodeParams
        this.selectTableModelCause.filterForm.unitCodeParams = this.dialog.form.unitCodeParams
        this.selectTableModelSolvePerson.filterForm.unitCodeParams = this.dialog.form.unitCodeParams
        this.getList() // 获取下拉数据、字典
        this.dialog.form = {
          defectInfoId: this.dialog.form.id,
          seclineId: '',
          siteId: '',
          pillarId: '',
          pillarNum: '',
          discoverPersonId: '',
          discoverPerson: '',
          discoverSourceTypeId: '',
          defectTypeId: '',
          defectTypeName: '',
          defectGradeId: '',
          defectGradeName: '',
          defectPositionId: '',
          positionName: '',
          discoverDate: '',
          rectifDatetime: '',
          solveWorkareaId: '',
          defectInfoDesc: '',
          defectImagesList: [],
          defectReasonId: '',
          defectReasonName: '',
          solvePersonalId: '',
          solvePersonal: '',
          handleWorkareaId: '',
          handleWorkareaName: '',
          solveDatetime: '',
          status: '',
          solveMethod: '',
          retestImagesList: [],
          repairImagesList: [],
          unitCodeParams: this.dialog.form.unitCodeParams
        }
        this.fileModal.fileList = []
        this.fileModal.pathList = []
        this.fileModalRetest.fileList = []
        this.fileModalRetest.pathList = []
        this.fileModalRepair.fileList = []
        this.fileModalRepair.pathList = []
        this.getInfoById(this.dialog.form.defectInfoId) // 根据id查询信息
      } else {
        this.dataList.siteList = []
        this.dataList.pillarList = []
      }
    }
  },
  methods: {
    // 获取下拉数据、字典
    getList() {
      // // 获取接触网工区
      // findWorkDeptList({ unitCodeParams: this.dialog.form.unitCodeParams }).then(response => {
      //   this.dataList.deptList = response.data
      // })
      // // 查询线路树信息列表
      // getSeclineTree({ unitCodeParams: this.dialog.form.unitCodeParams }).then(response => {
      //   this.dataList.seclineList = response.data
      // })
      // 查询人员信息列表
      getStaffList(this.selectTableModelFindBy.filterForm).then((response) => {
        this.dataList.staffList = response.data.records
        this.selectTableModelFindBy.total = response.data.total
        this.selectTableModelSolvePerson.total = response.data.total
      })
      // // 查询缺陷分类列表
      // getClassifyList(this.selectTableModelClassify.filterForm).then((response) => {
      //   this.dataList.classifyList = response.data.records
      //   this.selectTableModelClassify.total = response.data.total
      // })
      // // 查询缺陷等级列表
      // getGradeList(this.selectTableModelGrade.filterForm).then((response) => {
      //   this.dataList.gradeList = response.data.records
      //   this.selectTableModelGrade.total = response.data.total
      // })
      // // 查询缺陷部位列表
      // getPositionList(this.selectTableModelPosition.filterForm).then((response) => {
      //   this.dataList.positionList = response.data.records
      //   this.selectTableModelPosition.total = response.data.total
      // })
      // 查询缺陷成因列表
      getCauseList(this.selectTableModelCause.filterForm).then((response) => {
        this.dataList.causeList = response.data.records
        this.selectTableModelCause.total = response.data.total
      })
    },

    // 根据id查询信息
    getInfoById(id) {
      // 根据id查询信息
      getInfoById({
        unitCodeParams: this.dialog.form.unitCodeParams,
        id: id
      }).then(response => {
        const unitCodeParams = this.dialog.form.unitCodeParams
        this.dialog.form = response.data
        this.dialog.form.unitCodeParams = unitCodeParams

        // 组装dialog.form.defectImagesList
        this.dialog.form.defectImagesList.forEach(val => {
          const data = {
            name: val.fileName,
            fileSize: val.fileSize,
            fileExtname: val.fileExtname,
            fileName: val.fileName,
            filePath: val.filePath,
            thumbnail: val.thumbnail,
            fileType: val.fileExtname,
            memo: val.memo,
            uploadType: val.uploadType,
            url: val.url
          }
          this.fileModal.fileList.push(data)
          this.fileModal.pathList.push(data.filePath)
        })

        this.lookData = [
          {
            column1: '线路',
            column2: response.data.seclineName,
            column3: '区间站场',
            column4: response.data.siteName,
            column5: '支柱号',
            column6: response.data.pillarNum,
            type: 'text'
          },
          {
            column1: '公里标',
            column2: this.formatRoad(response.data.roadMark),
            column3: '行别',
            column4: response.data.directionName,
            column5: '隧道',
            column6: response.data.tunnelName,
            type: 'text'
          },
          {
            column1: '股道',
            column2: response.data.trackName,
            column3: '所属工区',
            column4: response.data.pillarDeptName,
            column5: '发现人',
            column6: response.data.discoverPerson,
            type: 'text'
          },
          {
            column1: '缺陷来源',
            column2: response.data.discoverSourceTypeName,
            column3: '缺陷分类',
            column4: response.data.defectTypeName,
            column5: '缺陷等级',
            column6: response.data.defectGradeName,
            type: 'text'
          },
          {
            column1: '缺陷部位',
            column2: response.data.positionName,
            column3: '发现日期',
            column4: response.data.discoverDate,
            column5: '整改期限',
            column6: response.data.rectifDatetime,
            type: 'text'
          },
          {
            column1: '整改责任工区',
            column2: response.data.solveWorkareaName,
            type: 'textarea'
          },
          {
            column1: '缺陷描述',
            column2: response.data.defectInfoDesc,
            type: 'textarea'
          },
          {
            column1: '图片',
            column2: response.data.defectImagesList,
            type: 'file'
          }
        ]

        // 组装dialog.form.retestImagesList
        this.dialog.form.retestImagesList.forEach(val => {
          const data = {
            name: val.fileName,
            fileSize: val.fileSize,
            fileExtname: val.fileExtname,
            fileName: val.fileName,
            filePath: val.filePath,
            thumbnail: val.thumbnail,
            fileType: val.fileExtname,
            memo: val.memo,
            uploadType: val.uploadType,
            url: val.url
          }
          this.fileModalRetest.fileList.push(data)
          this.fileModalRetest.pathList.push(data.filePath)
        })

        // 组装dialog.form.retestImagesList
        this.dialog.form.repairImagesList.forEach(val => {
          const data = {
            name: val.fileName,
            fileSize: val.fileSize,
            fileExtname: val.fileExtname,
            fileName: val.fileName,
            filePath: val.filePath,
            thumbnail: val.thumbnail,
            fileType: val.fileExtname,
            memo: val.memo,
            uploadType: val.uploadType,
            url: val.url
          }
          this.fileModalRepair.fileList.push(data)
          this.fileModalRepair.pathList.push(data.filePath)
        })

        if (this.dialog.form.seclineId) {
          // this.getSiteList() // 查询区间站场信息列表
          if (this.dialog.form.siteI) {
            this.getPillarList() // 查询支柱号信息列表
          }
        }

        this.$nextTick(() => {
          this.$refs.cancelDataForm.clearValidate()
        })
      })
    },

    // 查询区间站场信息列表
    getSiteList() {
      // 查询区间站场信息列表
      getLineSiteList({
        unitCodeParams: this.dialog.form.unitCodeParams,
        seclineId: this.dialog.form.seclineId
      }).then(response => {
        this.dataList.siteList = response.data

        // 处理选择框匹配不到回显id问题
        if (this.dialog.form.siteId) {
          let dealId = ''
          this.dataList.siteList.forEach(val => {
            if (this.dialog.form.siteId === val.siteId) {
              dealId = val.siteId
            }
          })
          this.dialog.form.siteId = dealId
        }
      })
    },

    // 查询支柱号信息列表
    getPillarList() {
      this.dataList.pillarList = []
      this.selectTableModel.filterForm = {
        page: 1,
        size: 10,
        seclineId: this.dialog.form.seclineId,
        siteId: this.dialog.form.siteId,
        pillarNum: '',
        directionId: '',
        unitCodeParams: this.dialog.form.unitCodeParams
      }
      this.selectTableModel.filterData.directionId.options = this.dialog.dataList.directionList
      // 查询支柱号信息列表
      getPillarList(this.selectTableModel.filterForm).then(response => {
        this.dataList.pillarList = response.data.records
        this.selectTableModel.total = response.data.total
      })
    },

    // 选择线路
    changeSeclineId(seclineId) {
      this.dialog.form.siteId = ''
      this.dataList.siteList = []
      this.dialog.form.pillarId = ''
      this.dialog.form.pillarNum = ''
      this.dataList.pillarList = []
      this.dialog.form.solveWorkareaId = ''
      if (seclineId !== '') {
        this.getSiteList() // 查询区间站场信息列表
      }
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate('seclineId')
        this.$refs.dataForm.clearValidate('siteId')
        this.$refs.dataForm.clearValidate('pillarNum')
        this.$refs.dataForm.clearValidate('solveWorkareaId')
      })
    },

    // 选择区间站场
    changeSiteId(siteId) {
      this.dialog.form.pillarId = ''
      this.dialog.form.pillarNum = ''
      this.dataList.pillarList = []
      this.dialog.form.solveWorkareaId = ''
      if (siteId !== '') {
        this.getPillarList() // 查询支柱号信息列表
      }
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate('siteId')
        this.$refs.dataForm.clearValidate('pillarNum')
        this.$refs.dataForm.clearValidate('solveWorkareaId')
      })
    },

    // 选择支柱
    changePillarId(item) {
      this.dialog.form.pillarId = item.pillarId
      this.dialog.form.pillarNum = item.pillarNum
      this.dialog.form.pillarDeptId = item.deptId
      this.dialog.form.solveWorkareaId = item.deptId
      // this.dialog.form.handleWorkareaId = item.handleWorkareaId
      this.dialog.form.roadMark = item.roadMark
      this.dialog.form.directionName = item.directionName
      this.dialog.form.trackName = item.trackName ? item.trackName : '非股道'
      this.dialog.form.tunnelName = item.tunnelName ? item.tunnelName : '非隧道'
      this.dialog.form.pillarDeptName = item.deptName
    },

    // 支柱清除
    clearPillarId() {
      this.dialog.form.pillarId = ''
      this.dialog.form.pillarNum = ''
      this.dialog.form.pillarDeptId = ''
      this.dialog.form.solveWorkareaId = ''
      // this.dialog.form.handleWorkareaId = '
      this.dialog.form.roadMark = ''
      this.dialog.form.directionName = ''
      this.dialog.form.trackName = ''
      this.dialog.form.tunnelName = ''
      this.dialog.form.pillarDeptName = ''
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate('pillarNum')
        this.$refs.dataForm.clearValidate('solveWorkareaId')
      })
    },

    // 选择发现人
    changeTableItemFindBy(row) {
      this.dialog.form.discoverPersonId = row.staffId
      this.dialog.form.discoverPerson = row.staffName
      this.dialog.form.findDeptId = row.deptId
    },

    // 选择缺陷分类
    changeTableItemDefectType(row) {
      this.dialog.form.defectTypeId = row.defectTypeId
      this.dialog.form.defectTypeName = row.defectTypeName
      this.dialog.form.defectGradeId = row.defectGradeId
      this.dialog.form.defectGradeName = row.defectGradeName
      const currentLevel = this.dataList.gradeList.find(item => item.defectGradeId === row.defectGradeId)
      const rectifDatetime = getDatatime(new Date(new Date(this.dialog.form.discoverDate).getTime() + (currentLevel.solveDays * 86400000)))
      this.dialog.form.rectifDatetime = this.dialog.form.discoverDate && currentLevel && currentLevel.solveDays ? rectifDatetime.substring(0, 10) : ''
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate('defectGradeName')
        this.$refs.dataForm.clearValidate('rectifDatetime')
      })
    },

    // 选择缺陷等级
    changeTableItemGrade(row) {
      this.dialog.form.defectGradeId = row.defectGradeId
      this.dialog.form.defectGradeName = row.defectGradeName
    },

    // 选择缺陷部位
    changeTableItemPosition(row) {
      this.dialog.form.defectPositionId = row.defectPositionId
      this.dialog.form.positionName = row.positionName
    },

    // 选择发现日期
    changeFindDate() {
      var tempData = this.dialog.form
      if (tempData.discoverDate && tempData.solveTimeCount) {
        tempData.rectifDatetime = tempData.discoverDate + (tempData.solveTimeCount * 86400000)
      }
      this.dialog.form = JSON.parse(JSON.stringify(tempData))
    },

    uploadSuccess(filelist, type, key, index, fileArr) { // 上传成功
      this.dialog.form.defectImagesList = []
      fileArr.forEach(val => {
        const data = {
          name: val.fileName,
          fileSize: val.fielSize,
          fileExtname: val.fileExtname,
          fileName: val.fileName,
          filePath: val.filePath,
          thumbnail: val.thumbnail,
          fileType: val.fileExtname,
          uploadType: val.uploadType,
          memo: ''
        }
        this.dialog.form.defectImagesList.push(data)
      })
      this.notifiySuccess('上传成功')
    },

    uploadSuccessRetest(filelist, type, key, index, fileArr) { // 上传成功
      this.dialog.form.retestImagesList = []
      fileArr.forEach(val => {
        const data = {
          name: val.fileName,
          fileSize: val.fielSize,
          fileExtname: val.fileExtname,
          fileName: val.fileName,
          filePath: val.filePath,
          thumbnail: val.thumbnail,
          fileType: val.fileExtname,
          uploadType: val.uploadType,
          memo: ''
        }
        this.dialog.form.retestImagesList.push(data)
      })
      this.notifiySuccess('上传成功')
    },

    uploadSuccessRepair(filelist, type, key, index, fileArr) { // 上传成功
      this.dialog.form.repairImagesList = []
      fileArr.forEach(val => {
        const data = {
          name: val.fileName,
          fileSize: val.fielSize,
          fileExtname: val.fileExtname,
          fileName: val.fileName,
          filePath: val.filePath,
          thumbnail: val.thumbnail,
          fileType: val.fileExtname,
          uploadType: val.uploadType,
          memo: ''
        }
        this.dialog.form.repairImagesList.push(data)
      })
      this.notifiySuccess('上传成功')
    },

    // 整改期限、处理日期控制
    handleDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.dialog.form.discoverDate) { // 如果发现时间不为空，则大于发现时间
            return new Date(self.dialog.form.discoverDate).getTime() > time.getTime()
          } else {
            return time.getTime() < Date.now() // 发现时间不选时，整改期限时间最大值大于等于当天
          }
        }
      }
    },

    // 选择缺陷成因
    changeTableItemCause(row) {
      this.dialog.form.defectReasonId = row.defectReasonId
      this.dialog.form.defectReasonName = row.defectReasonName
    },

    // 选择处理人
    changeTableItemSolvePerson(row) {
      this.dialog.form.solvePersonalId = row.staffId
      this.dialog.form.solvePersonal = row.staffName
      this.dialog.form.handleWorkareaId = row.deptId
      this.dialog.form.handleWorkareaName = row.deptName
    },

    // 回调方法
    updateData() {
      this.$refs.cancelDataForm.validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          this.dialog.form.retestImagesList.forEach(val => {
            val.photoFlag = 4
            if (val.fileExtname.indexOf('.') === -1) {
              val.fileExtname = '.' + val.fileExtname
            }
            if (val.fileType.indexOf('.') === -1) {
              val.fileType = '.' + val.fileType
            }
          })
          this.dialog.form.repairImagesList.forEach(val => {
            val.photoFlag = 2
            if (val.fileExtname.indexOf('.') === -1) {
              val.fileExtname = '.' + val.fileExtname
            }
            if (val.fileType.indexOf('.') === -1) {
              val.fileType = '.' + val.fileType
            }
          })
          // 新增/修改信息
          cancelNumber(this.dialog.form).then(() => {
            this.notifiySuccess('保存成功')
            this.$emit('updateData')
          }).catch(() => {
            this.dialog.loading = false
          })
        }
      })
    },

    // 初始化
    beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs.cancelDataForm.clearValidate()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#look-data {
  border-collapse: collapse;
  width: 100%;
}
#look-data td, #look-data th {
  border: 1px solid #DFE6EC;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
}
#look-data tr td:nth-child(odd){
  width: 15%;
  max-width: 20px;
  padding-left: 20px;
  padding-right: 26px;
  text-align: right;
  background: #E9F2FC;
}
#look-data tr td:nth-child(even){
  max-width: 20px;
  padding-left: 20px;
  padding-right: 20px;
  word-wrap: break-word;
  overflow: hidden;
}
.dialog_box #look-data tr td.file-box {
  width: 100%;
  text-align: left;
  background: #ffffff;
}
#look-data .file-content {
  min-height: 187px;
}
</style>
